$height: 32px;
$border-color: #999;
$red: #f1453d;
$border-color-focus: #888;

@keyframes primary-shadow {
  to {
    box-shadow: lighten($border-color-focus, 36%) 0px 0px 0px 2px;
  }
}
.wrapper {
  display: inline-flex;
  font-size: 14px;
  align-items: center;
  > :not(:last-child) {
    margin-right: 0.5em;
  }
  > input {
    line-height: 32px;
    height: 32px;
    border: 1px solid #999;
    border-radius: 4px;
    padding: 0 8px;
    font-size: inherit;
    &:hover {
      border-color: #999;
    }
    &:focus {
      outline: none;
      animation: primary-shadow 250ms linear;
      animation-fill-mode: forwards;
      /* box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); */
    }
    &[disabled],
    &[readonly] {
      border-color: #aaa;
      color: #aaa;
    }
  }
  &.error {
    > input {
      border-color: $red;
    }
  }
  .errorMessage {
    color: $red;
    line-height: 34px;
  }
}